import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Tree } from 'antd'
import menuList from '../../config/menuConfig'

const Item = Form.Item

/*
添加分类的form组件
 */
export default class AuthForm extends PureComponent {
  static propTypes = {
    role: PropTypes.object,
  }

  constructor(props) {
    super(props)

    // 根据传入角色的menus生成初始状态
    const { menus } = this.props.role
    this.state = {
      checkedKeys: menus,
    }
  }

  /*
  为父组件提交获取最新menus数据的方法
   */
  getMenus = () => this.state.checkedKeys

  getTree = menuList => {
    let arr = []
    if (!!menuList && menuList.length !== 0) {
      menuList.forEach(item => {
        let obj = {}
        obj.title = item.title
        obj.key = item.key
        if (item.children) {
          obj.children = this.getTree(item.children) // 递归调用
        }
        arr.push(obj)
      })
    }
    return arr
  }

  // 选中某个node时的回调
  onCheck = checkedKeys => {
    console.log('onCheck', checkedKeys)
    this.setState({ checkedKeys })
  }

  componentWillMount() {
    console.log(this.props.role)
    this.treeData = [
      {
        title: '平台权限',
        key: '平台权限',
        children: this.getTree(menuList),
      },
    ]
  }

  // 根据新传入的role来更新checkedKeys状态
  /*
  当组件接收到新的属性时自动调用
   */
  componentWillReceiveProps(nextProps) {
    console.log('componentWillReceiveProps()', nextProps)
    const menus = nextProps.role.menus
    this.setState({
      checkedKeys: menus,
    })
    // this.state.checkedKeys = menus
  }

  render() {
    console.log('AuthForm render()', this.treeData)
    const { role } = this.props
    const { checkedKeys } = this.state
    // 指定Item布局的配置对象
    const formItemLayout = {
      labelCol: { span: 4 }, // 左侧label的宽度
      wrapperCol: { span: 15 }, // 右侧包裹的宽度
    }

    return (
      <div>
        <Item label="角色名称" {...formItemLayout}>
          <Input value={role.name} disabled />
        </Item>
        <Tree checkable treeData={this.treeData} defaultExpandAll={true} checkedKeys={checkedKeys} onCheck={this.onCheck}></Tree>
      </div>
    )
  }
}
